<template>
  <el-form-item v-show="false" :prop="`time_welcome.${timeIndex}.week`" :rules="rules.week"></el-form-item>
  <el-form-item v-show="false" :prop="`time_welcome.${timeIndex}.send_time`" :rules="rules.send_time"></el-form-item>
  <el-form-item v-show="false" :prop="`time_welcome.${timeIndex}.content`" :rules="rules.content"></el-form-item>
  <el-form-item>
    <div class="welc_time_top"> <span class="radius_left"></span> 在分时段时间范围内，优先发送分时段欢迎语</div>
    <div class="welc_content_t"> <div class="welc_color"></div> 时段{{ timeIndex + 1 }}</div>
    <div class="welc_content_c">
      <div class="check_box">
        <span style="margin-right: 10px">发送周期: </span>
        <el-checkbox-group v-model="formData.week">
          <el-checkbox v-for="item in weekOption" :key="item.lable" :label="item.label" :disabled="item.disabled">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
        <span style="padding: 3px 0 0 11px; cursor: pointer" @click="onDelete">
          <el-icon><delete /></el-icon
        ></span>
      </div>
      <div class="inp_time">
        <span style="margin-right: 10px">发送时间: </span>
        <el-time-picker v-model="formData.send_time" value-format="HH:mm:ss" :default-value="new Date(0, 0, 0, 0, 0, 0)" is-range range-separator="—" start-placeholder="开始时间" end-placeholder="结束时间" @change="(v) => v || (formData.send_time = [])" />
      </div>
    </div>
  </el-form-item>
  <el-form-item>
    <el-radio-group v-model="formData.type">
      <el-radio :label="1">新建欢迎语</el-radio>
      <el-radio :label="3">已有欢迎语</el-radio>
    </el-radio-group>
    <div v-if="formData.type == 3">
      <el-button size="small" @click="onChooseWelcome">选择已有欢迎语</el-button>
    </div>
  </el-form-item>
  <el-form-item>
    <div class="container">
      <el-input @input="onName" v-model="formData.content" :rows="6" resize="none" type="textarea" placeholder="请输入欢迎语" class="content_input" />
      <div class="text_btn">
        <div>
          <span @click="onNickName" style="cursor: pointer">插入客户昵称</span>
          <span style="margin: 0 6px 0 18px; color: #33302d; cursor: pointer" @click="onOpenMaterial('1')">选择文本</span>
          <span style="cursor: pointer" @click="emojiVisible = !emojiVisible">😊</span>
        </div>
        <div>
          <span class="color:#ff6b00">{{ formData.welcome.content.length }} <span style="color: #969696">/1000</span> </span>
        </div>
      </div>
      <!-- 表情管理 -->
      <div class="emoj_box">
        <ZWEmoji v-show="emojiVisible" @choose="chooseEmoji" />
      </div>
      <!-- 文件信息 -->
      <el-scrollbar class="upload_list_box" max-height="230px">
        <ul class="upload_list">
          <template v-for="(item, index) in previewData" :key="item.id">
            <li v-if="item.type > 0" class="upload_item">
              <img class="file_icon" :src="item.cur_icon" alt="" />
              <div class="file_name">{{ item.name }}</div>
              <img class="del_icon" @click="onRemove(item.id)" src="@/assets/image/channel/remove_icon.png" />
            </li>
          </template>
        </ul>
      </el-scrollbar>
      <!-- 选择素材 -->
      <el-popover placement="top-start" popper-class="pop_select_box" :width="300" trigger="hover">
        <template #reference>
          <div class="text_hover">
            <el-icon><Plus /></el-icon> 添加图片/视频/音频/文件/链接
          </div>
        </template>
        <template #default>
          <div class="upload_pop">
            <div class="item_pop" v-for="item in uploadList" :key="item.id" @click="onOpenUpload(item.id)">
              <img class="item_pop_icon" :src="item.icon" alt="" />
              <span class="item_pop_name">{{ item.name }}</span>
            </div>
          </div>
        </template>
      </el-popover>
      <!-- 欢迎语预览 -->
      <Phone :fileList="previewData" />
    </div>
  </el-form-item>
  <ZWMatericalLib ref="ZWMatericalLibRef" @submit="getFiles" />
  <ZWDepart ref="DepartRef" @submit="getDepart" :type="1" />
  <BatchLabel ref="BatchLabelRef" @save="getTags" />
  <ChooseWelcome ref="ChooseWelcomeRef" @submit="submitHandel" />
</template>

<script setup lang="ts">
  import Phone from './Phone.vue'
  import ChooseWelcome from './ChooseWelcome.vue'
  import UploadImg from './UploadImg.vue'
  import ZWDepart from '@/components/ZWDepart.vue'
  import BatchLabel from '@/components/BatchLabel.vue'
  import ZWMatericalLib from '@/components/channel/ZWMatericalLib.vue'
  import ZWEmoji from '@/components/ZWEmoji.vue'
  import WelcomeTime from './WelcomeTime.vue'
  import { ref, reactive, withDefaults, defineProps, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import { getSetionId } from '@/utils/utils'

  interface Props {
    pageType: any
    timeIndex: any
    weekOption: any
    lookData: any
  }
  const props = withDefaults(defineProps<Props>(), {
    pageType: '',
    timeIndex: 0,
    weekOption: [
      { label: 1, name: '周一', disabled: false },
      { label: 2, name: '周二', disabled: false },
      { label: 3, name: '周三', disabled: false },
      { label: 4, name: '周四', disabled: false },
      { label: 5, name: '周五', disabled: false },
      { label: 6, name: '周六', disabled: false },
      { label: 0, name: '周日', disabled: false }
    ],
    lookData: () => ({})
  })
  const emit = defineEmits(['submit', 'delTime'])
  const uploadList = reactive([
    { id: '2', icon: '/static/file/pic.png', name: '图片' },
    { id: '3', icon: '/static/file/mp3.png', name: '音频' },
    { id: '4', icon: '/static/file/mov.png', name: '视频' },
    { id: '5', icon: '/static/file/ysb.png', name: '文件' },
    { id: '6', icon: '/static/file/link.png', name: '链接' }
  ])
  const onURL = (data: any) => {
    let fileTYpe = {
      '.pdf': '/static/file/pdf.png',
      '.doc': '/static/file/doc.png',
      '.docx': '/static/file/doc.png',
      '.xls': '/static/file/xls.png',
      '.xlsx': '/static/file/xls.png',
      '.ppt': '/static/file/ppt.png',
      '.pptx': '/static/file/ppt.png'
    }
    if (data) {
      const last = data.substring(data.lastIndexOf('.'))
      return fileTYpe[last] || '/static/file/file.png'
    }
  }
  const formRef = ref<any>(null)
  const DepartRef: any = ref<any>(null) // 部门弹框类型
  const ZWMatericalLibRef: any = ref(null)
  const BatchLabelRef: any = ref<any>(null) // 选择标签弹框
  const emojiVisible = ref(false)
  const fileList = ref([])
  const creators = ref([]) // 创建人options
  const AllTags = ref([]) // 选择标签options
  const formData = ref<any>({
    week: [], // 星期几
    send_time: [],
    type: 1, // 欢迎语类型
    content: '', // 内容
    attachment: [],
    local_link: [],
    local_content: []
  })
  const rules = reactive({
    week: [{ required: true, message: '请选择发送周期', trigger: 'change' }],
    send_time: [{ required: true, message: '请选择发送时间', trigger: 'change' }],
    link_desc: [{ required: true, message: '请输入活动描述', trigger: 'blur' }],
    content: [{ required: true, message: '请输入欢迎语内容', trigger: 'blur' }]
  })
  //更改欢迎语
  const onName = () => {
    previewData.value[0] = {
      type: 0,
      content: formData.value.content
    }
  }
  //打开新建选择人
  const openDepart = () => {
    DepartRef.value.departVisble = true
    DepartRef.value.selectedMember = [...creators.value]
  }
  // 获取部门成员
  const getDepart = (res: any) => {
    creators.value = res
    formData.value.user_list = getSetionId('id', creators.value)
  }
  // 员工数据
  const tags = reactive([])
  // 员工移除
  const handleClose = (tag: any) => {
    creators.value = creators.value.filter((item: any) => item.id !== tag.id)
    formData.value.user_list = getSetionId('id', creators.value)
    DepartRef.value.removeItem(tag)
  }
  // 打开选择标签
  const selecTag = () => {
    BatchLabelRef.value.hasConditiion = false
    BatchLabelRef.value.dialogData.labelChooseType = 2
    BatchLabelRef.value.chooseDataArr = [...AllTags.value]
    BatchLabelRef.value.dialogVisible = true
  }
  // 获取标签
  const getTags = (data: any) => {
    AllTags.value = data.data
    formData.value.tag_list = getSetionId('id', data.data)
  }
  // 移除标签
  const onClose1 = (tag: any) => {
    AllTags.value = AllTags.value.filter((item) => item.id != tag.id)
    formData.value.tag_list = getSetionId('id', AllTags.value)
  }
  // 插入名字
  const onNickName = () => {
    if (props.pageType == 'look') return
    formData.value.content += '##客户姓名## '
    previewData.value[0] = {
      type: 0,
      content: formData.value.content
    }
  }
  //表情包管理
  const chooseEmoji = (emoji: any) => {
    //事件。数据包含文本区域的值
    if (props.pageType == 'look') return
    formData.value.content = formData.value.content + emoji
    previewData.value[0] = {
      type: 0,
      content: formData.value.content
    }
    emojiVisible.value = false
  }
  //打开素材上传框
  const onOpenMaterial = (num: string) => {
    if (props.pageType == 'look') return
    ZWMatericalLibRef.value.materVisible = true
    ZWMatericalLibRef.value.baseId = num //打开对应的基础素材
    ZWMatericalLibRef.value.existFile = Number(9 - fileList.value.length) //打开对应的基础素材
  }
  //获取素材
  const getFiles = (res: any) => {
    console.log(res, '上传框返回的素材')
    if (res.data.length + formData.value.attachment.length > 8) {
      ElMessage.error('最多只能上传8个素材,请删除后再上传')
      return
    }
    onLocalType(res)
  }

  // 打开上传
  const onOpenUpload = (num: string) => {
    if (props.pageType == 'look') return
    ZWMatericalLibRef.value.materVisible = true
    ZWMatericalLibRef.value.baseId = num //打开对应的基础素材
    ZWMatericalLibRef.value.existFile = Number(9 - fileList.value.length) //打开对应的基础素材
  }
  // 删除上传的文件
  const onRemove = (id: any) => {
    if (props.pageType == 'look') return
    console.log(id, '父组件删除', formData.value.local_link)
    previewData.value = previewData.value?.filter((item: any) => item.id != id)
    formData.value.attachment = formData.value.attachment?.filter((item: any) => item.media_content_id != id)
    formData.value.local_link = formData.value.local_link?.filter((item: any) => item.link_url != id)
    formData.value.local_content = formData.value.local_content?.filter((item: any) => item.code != id)
  }
  const previewData = ref<any>([])
  const onType = (v: any) => {
    console.log(v.content_id)

    if (v.content_id) {
      formData.value.attachment.push({
        type: v.type,
        media_content_id: v.content_id
      })
    } else {
      formData.value.local_content.push({
        type: v.type,
        code: v.media_file?.code
      })
    }
    switch (v.type) {
      case 1: // 图片
        previewData.value.push({
          type: v.type,
          id: v.content_id ? v.content_id : v.media_file.code,
          cur_icon: '/static/file/pic.png',
          name: v.media_file?.name,
          absolute_url: v.media_file?.absolute_url
        })
        break
      case 2: // 视频
        previewData.value.push({
          type: v.type,
          id: v.content_id ? v.content_id : v.media_file.code,
          cur_icon: '/static/file/mov.png',
          name: v.media_file?.name,
          thumbnail_url: `${v.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`
        })
        break
      case 3: // 链接
        previewData.value.push({
          type: v.type,
          id: v.content_id ? v.content_id : v.media_file.code,
          cur_icon: '/static/file/link.png',
          title: v.link_title,
          desc: v.link_decs,
          cover_image_url: v.link_share_image
        })
        break
      case 4: // 音频
        previewData.value.push({
          type: v.type,
          id: v.content_id ? v.content_id : v.media_file.code,
          cur_icon: '/static/file/mp3.png',
          name: v.media_file?.name
        })
        break
      case 5: // 文件
        previewData.value.push({
          type: v.type,
          id: v.content_id ? v.content_id : v.media_file.code,
          cur_icon: onURL(v.media_file?.url),
          name: v.media_file?.name
        })
        break
    }
  }
  const onLocalType = (v: any) => {
    console.log(v.type)
    v.type = +v.type
    if (v.local) {
      switch (v.type) {
        case 2: // 图片
          previewData.value.push({
            type: 1,
            id: v.data[0]?.code,
            cur_icon: '/static/file/pic.png',
            name: v.data[0]?.name,
            absolute_url: v.data[0]?.url
          })
          formData.value.local_content.push({
            type: 1,
            code: v.data[0]?.code
          })
          break
        case 3: // 音频
          previewData.value.push({
            type: 4,
            id: v.data[0]?.code,
            cur_icon: '/static/file/mp3.png',
            name: v.data[0]?.name
          })
          formData.value.local_content.push({
            type: 4,
            code: v.data[0]?.code
          })
          break
        case 5: // 文件
          previewData.value.push({
            type: 5,
            id: v.data[0]?.code,
            cur_icon: onURL(v.media_file?.url),
            name: v.data[0]?.name
          })
          formData.value.local_content.push({
            type: 5,
            code: v.data[0]?.code
          })
          break
        case 4: // 视频
          previewData.value.push({
            type: 2,
            id: v.data[0]?.code,
            cur_icon: '/static/file/mov.png',
            name: v.data[0]?.name,
            thumbnail_url: `${v.data[0]?.url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`
          })
          formData.value.local_content.push({
            type: 2,
            code: v.data[0]?.code
          })
          break
        case 6: // 链接
          previewData.value.push({
            type: 3,
            id: v.data[0]?.link_url,
            cur_icon: '/static/file/link.png',
            name: v.data[0]?.title,
            desc: v.data[0]?.link_desc,
            cover_image_url: v.data[0]?.cover_image_url
          })
          formData.value.local_link.push({
            link_title: v.data[0]?.title,
            link_url: v.data[0]?.link_url,
            link_desc: v.data[0]?.link_desc,
            link_share_image: v.data[0]?.cover_image_url
          })
          break
      }
    } else {
      switch (v.typeStr) {
        case 1: // 文本
        case 'text': // 文本
          let arr = [...new Set(v.data)]
          arr.forEach((item: any) => {
            formData.value.content += item.content
            previewData.value[0] = {
              type: 0,
              content: formData.value.content
            }
          })
          break
        case 2: // 图片
        case 'image': // 图片
          v.data.forEach((item: any) => {
            previewData.value.push({
              type: 1,
              id: item.id,
              cur_icon: '/static/file/pic.png',
              name: item.file_name,
              user_name: item.user_name,
              absolute_url: item.absolute_url
            })
            formData.value.attachment.push({
              type: 1,
              media_content_id: item.id
            })
          })
          break
        case 4: // 视频
        case 'video': // 视频
          v.data.forEach((item: any) => {
            previewData.value.push({
              type: 2,
              id: item.id,
              cur_icon: '/static/file/mov.png',
              name: item.file_name,
              user_name: item.user_name,
              thumbnail_url: item.thumbnail_url
            })
            formData.value.attachment.push({
              type: 2,
              media_content_id: item.id
            })
          })
          break
        case 6: // 链接
        case 7: // 链接
        case 'link': // 链接
          v.data.forEach((item: any) => {
            previewData.value.push({
              type: 3,
              id: item.id,
              cur_icon: '/static/file/link.png',
              name: item.title,
              desc: item.desc,
              user_name: item.user_name,
              cover_image_url: item.cover_image_url
            })
            formData.value.attachment.push({
              type: 3,
              media_content_id: item.id
            })
          })
          break
        case 3: // 音频
        case 'audio': // 音频
          v.data.forEach((item: any) => {
            previewData.value.push({
              type: 4,
              id: item.id,
              cur_icon: '/static/file/mp3.png',
              name: item.file_name,
              user_name: item.user_name
            })
            formData.value.attachment.push({
              type: 4,
              media_content_id: item.id
            })
          })
          break
        case 5: // 文件
        case 'file': // 文件
          v.data.forEach((item: any) => {
            previewData.value.push({
              type: 5,
              id: item.id,
              cur_icon: onURL(item.mediaFileInfo?.name),
              name: item.mediaFileInfo?.name,
              user_name: item.user_name
            })
            formData.value.attachment.push({
              type: 5,
              media_content_id: item.id
            })
          })
          break
      }
    }
  }
  const submitHandel = (v: any) => {
    console.log(v, '选择已有素材确认')
    previewData.value[0] = {
      type: 0,
      content: v.content
    }
    formData.value.content = v.content
    v.welcome_friend_attachment.forEach((item: any) => {
      onType(item)
    })
  }

  watch(
    () => props.lookData,
    (v) => {
      if (v) {
      }
    }
  )
  const ChooseWelcomeRef = ref<any>(null)
  const onChooseWelcome = () => {
    ChooseWelcomeRef.value.appDialog.visible = true
  }
  watch(
    () => formData.value.content,
    (newV: any, oldV: any) => {
      if (formData.value.content.length <= 1000) {
        onName()
      } else {
        formData.value.content = oldV
      }
    },
    { immediate: true }
  )
  const onDelete = () => {
    emit('delTime', props.timeIndex)
  }

  const onSubmit = async () => {
    console.log('兜底校验')
    if (!formRef.value) return
    console.log('formRef', formRef.value)
    formRef.value!.validate((valid: any, fields: any) => {
      console.log('valid')
      if (valid) {
        emit('submit')
      } else {
        emit('submit', false)
        ElMessage.warning(`时段${props.timeIndex + 1}：${Object.values(fields)[0][0].message}`)
      }
    })
  }
  const onLookData = (val: any) => {
    onName()
    console.log(val, '分时段欢迎语')
    // val?.forEach((item: any) => {
    //   onType(item)
    // })
  }

  let flag = true
  watch(
    props.lookData,
    (v) => {
      console.log(v, 'lookData')
      if (v && flag) {
        flag = false
        previewData.value[0] = {
          type: 0,
          content: v.content
        }
        console.log(v, '222222')

        formData.value = {
          attachment: [],
          content: v.content,
          send_time: v.send_time || [],
          type: v.type,
          week: v.week || []
        }
        v.attachment.forEach((item: any) => {
          onType(item)
        })
      }
    },
    { immediate: true }
  )
  watch(
    formData,
    (v) => {
      emit('submit', props.timeIndex, v)
    },
    { deep: true }
  )
  defineExpose({
    onsubmit,
    formData,
    onLookData
  })
</script>

<style lang="scss" scoped>
  .img_box {
    display: grid;
    grid-template-columns: 64px 110px 1fr;
    grid-gap: 20px;
    font-size: 10px;

    .text {
      padding-top: 80px;
    }
  }
  $num: 2;
  @mixin ellips($num) {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $num;
    line-clamp: $num;
    -webkit-box-orient: vertical;
  }
  :deep .el-checkbox {
    margin-right: 18px;
  }
  .pop_select_box {
    height: 84px;

    .upload_btn {
      margin-top: 8px;
    }

    .upload_pop {
      background: #ffffff;
      border-radius: 12px;
      // box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-around;

      .item_pop {
        width: 60px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .item_pop_icon {
          width: 40px;
          cursor: pointer;
        }

        .item_pop_name {
          font-size: 14px;
          margin-top: 2px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1a1918;
        }
      }
    }
  }
  .container {
    position: relative;
    width: 600px;
    height: 480px;
    background: #f8f8f8;
    border-radius: 4px;
    :deep(.el-textarea__inner) {
      border: none;
      box-shadow: none;
      background-color: #f8f8f8;
      border-bottom: 1px solid #eaeaea;
    }
    .text_btn {
      display: flex;
      justify-content: space-between;
      padding: 5px;
      color: #ff6b00;
    }
    .text_hover {
      position: absolute;
      bottom: 15px;
      left: 15px;
      z-index: 10;
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 0 12px;
      color: #969696;
      background: #f8f8f8;
      border: 1px solid #d9d9d9;
    }
    .upload_list_box {
      overflow: hidden;
      height: 230px;
    }

    .upload_list {
      .upload_item {
        margin-top: 5px;
        width: 440px;
        height: 32px;
        box-sizing: border-box;
        background: #eaeaea;
        display: flex;
        padding: 0px 10px 0px 14px;
        align-items: center;

        .file_icon {
          width: 20px;
          height: 20px;
          margin-right: 7px;
        }

        .file_name {
          width: 375px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .del_icon {
          width: 10px;
          height: 10px;
          cursor: pointer;
        }
      }
    }
    .prev_box {
      flex: 1;
      position: absolute;
      right: -480px;
      top: 0;

      .phone_con {
        // justify-content: center;
        position: relative;
        margin: -20px auto;
        width: 244px;
        height: 495px;
        box-sizing: border-box;
        border-radius: 36px;
        border: 9px solid #eef5fe;
        background: url('@/assets/image/channel/phone_bg.png');
        background-size: cover;

        .phone-title {
          position: absolute;
          top: -40px;
          left: 75px;
        }

        .phone_List {
          width: 100%;
          box-sizing: border-box;
          position: absolute;
          top: 48px;
          height: 380px;
          bottom: 48px;
          padding: 7px 10px;

          .bg_friend {
            // width: 100%;

            .public_title {
              font-size: 11px;
              margin-top: -10px;
              text-align: center;
              font-family: STHeitiSC-Light, STHeitiSC;
              font-weight: 300;
              color: #33302d;
            }
            .public_time {
              margin-top: -19px;
              text-align: center;
              font-size: 11px;
              font-family: STHeitiSC-Light, STHeitiSC;
              font-weight: 300;
              color: #969696;
            }
            .user_con {
              margin-top: 10px;
              display: flex;
              .user_avator {
                width: 22px;
                height: 22px;
                margin-right: 4px;
              }
              .friend_main {
                flex: 1;
                .user_name {
                  font-size: 12px;
                  margin-top: -8px;
                  font-family: STHeitiSC-Medium, STHeitiSC;
                  font-weight: 500;
                  color: #969696;
                  transform: scale(0.6);
                  transform-origin: left top;
                  margin-bottom: 4px;
                }
                .welcomeWords {
                  position: relative;
                  margin-top: -23px;
                  font-size: 12px;
                  color: #969696;
                  line-height: 15px;
                  transform: scale(0.6);
                  transform-origin: left top;
                  width: 160px;
                  box-sizing: border-box;
                  height: 67px;
                  overflow: hidden;
                  padding: 5px 10px;
                  background-color: #fff;
                  border-radius: 5px;
                  @include ellips(4);
                  &::after {
                    content: '';
                    position: absolute;
                    left: -5px;
                    top: 10px;
                    width: 0;
                    height: 0;
                    border-top: 5px solid transparent;
                    border-right: 8px solid #fff;
                    border-bottom: 5px solid transparent;
                  }
                }
                .send_image {
                  width: 68px;
                  height: 46px;
                  margin-top: -23px;
                }
                .video_list {
                  position: relative;
                  width: 80px;
                  height: 55px;
                  margin-top: -23px;

                  .video_image {
                    width: 100%;
                    height: 100%;
                  }
                  .video_play {
                    width: 15px;
                    height: 15px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                  }
                }
                .user_link {
                  // margin-left: 5px;
                  margin-top: -23px;
                  position: relative;
                  width: 151px;
                  height: 65px;
                  box-sizing: border-box;
                  padding: 5px 10px;
                  border-radius: 5px;
                  background: #ffffff;
                  &::after {
                    content: '';
                    position: absolute;
                    left: -5px;
                    top: 10px;
                    width: 0;
                    height: 0;
                    border-top: 5px solid transparent;
                    border-right: 8px solid #fff;
                    border-bottom: 5px solid transparent;
                  }
                  .user_link_tit {
                    width: 100%;
                    font-size: 12px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #000000;
                    transform: scale(0.83);
                    transform-origin: left top;
                    @include ellips(2);
                  }
                  .user_link_main {
                    margin-top: 4px;
                    display: flex;
                    .user_link_desc {
                      width: 110px;
                      font-size: 12px;
                      font-family: STHeitiSC-Light, STHeitiSC;
                      font-weight: 300;
                      color: #969696;
                      transform: scale(0.6);
                      transform-origin: left top;
                      margin-top: 2px;
                      @include ellips(3);
                    }
                    .user_link_icon {
                      width: 22px;
                      height: 22px;
                    }
                  }
                }
                .user_file {
                  position: relative;
                  // margin-left: 5px;
                  margin-top: -23px;
                  width: 150px;
                  height: 48px;
                  box-sizing: border-box;
                  padding: 8px;
                  border-radius: 3px;
                  background: #ffffff;
                  &::after {
                    content: '';
                    position: absolute;
                    left: -5px;
                    top: 6px;
                    width: 0;
                    height: 0;
                    border-top: 5px solid transparent;
                    border-right: 10px solid #fff;
                    border-bottom: 5px solid transparent;
                  }
                  .user_file_main {
                    display: flex;
                    .user_file_desc {
                      width: 105px;
                      font-size: 12px;
                      transform: scale(0.83);
                      transform-origin: left top;
                      margin-bottom: 2px;
                      font-family: STHeitiSC-Light, STHeitiSC;
                      font-weight: 300;
                      color: #000000;
                      @include ellips(2);
                    }
                    .user_file_icon {
                      width: 30px;
                      height: 30px;
                    }
                  }
                  .user_file_size {
                    // margin-top: 2px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #969696;
                    font-size: 12px;
                    transform: scale(0.6);
                    transform-origin: left top;
                  }
                }
              }
            }
          }
        }
      }
    }
    .welc_time_top {
      display: flex;
      align-items: center;
      width: 600px;
      height: 40px;

      font-size: 14px;
      font-family: STHeitiSC-Medium, STHeitiSC;
      font-weight: 500;
      color: #33302db3;
      line-height: 20px;
      background: #fffaf9;
      .radius_left {
        width: 8px;
        height: 8px;
        margin: 0 20px;
        border-radius: 50%;
        background: #ff6b00;
      }
    }
    .welc_content_t {
      display: flex;
      align-items: center;
      margin: 20px 0;
      .welc_color {
        width: 3px;
        height: 18px;
        background: #ff6b00;
        margin-right: 10px;
      }
    }
    .welc_content_c {
      width: 600px;
      height: 103px;
      padding: 0 0 0 10px;
      background: #ffffff;
      border: 1px solid #eaeaea;
      .check_box {
        display: flex;
        margin-bottom: 6px;
      }
    }
  }
  .form-staffs {
    display: flex;

    .title {
      margin-right: 12px;
    }

    .staffs {
      &_item {
        height: 22px;
        line-height: 22px;
        margin-right: 6px;
        // padding: 0;
        color: #35383a;
        border: 1px solid #fffaf9;
        border-radius: 1px 1px 1px 1px;
        background: #fffaf9;
      }

      :deep .el-tag .el-icon {
        width: 12px;
        height: 12px;
        color: #ffffff;
        background: #d9d9d9;
      }

      :deep .el-tag .el-icon svg {
        margin: 0px;
      }

      :deep .el-tag .el-tag__close:hover {
        background: #d9d9d9;
      }

      :deep span.el-tag.el-tag--light.staffs_item:before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 11px;
        background: url('@/assets/image/LiveCode/people_icon.png') center/100% no-repeat;
        margin-right: 10px;
      }
    }
  }
  .welc_time_top {
    display: flex;
    align-items: center;
    width: 600px;
    height: 40px;

    font-size: 14px;
    font-family: STHeitiSC-Medium, STHeitiSC;
    font-weight: 500;
    color: #33302db3;
    line-height: 20px;
    background: #fffaf9;
    .radius_left {
      width: 8px;
      height: 8px;
      margin: 0 20px;
      border-radius: 50%;
      background: #ff6b00;
    }
  }
  .welc_content_t {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .welc_color {
      width: 3px;
      height: 18px;
      background: #ff6b00;
      margin-right: 10px;
    }
  }
  .welc_content_c {
    width: 600px;
    height: 103px;
    padding: 0 0 0 10px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    .check_box {
      display: flex;
      margin-bottom: 6px;
    }
  }
</style>
